CSS @property : Maîtriser la Définition et la Validation des Types de Propriétés Personnalisées

Dans le paysage en constante évolution du développement web, rester à la pointe exige d'adopter de nouvelles technologies et techniques qui améliorent l'efficacité, la maintenabilité et l'expérience utilisateur globale. Les propriétés personnalisées CSS, également connues sous le nom de variables CSS, ont révolutionné la façon dont nous gérons et contrôlons les styles. Avec l'introduction de la règle-at @property, CSS gagne un outil encore plus puissant : la capacité de définir et de valider ces propriétés personnalisées, conduisant à un style plus robuste et prévisible.

Qu'est-ce que CSS @property ?

La règle-at @property permet aux développeurs de définir le type, la syntaxe et d'autres caractéristiques des propriétés personnalisées. Considérez cela comme un moyen de fournir une structure et une validation pour vos variables CSS. Avant @property, les variables CSS n'étaient essentiellement que des chaînes de texte pouvant contenir n'importe quoi. Ce manque de structure pouvait entraîner des erreurs, rendant le débogage plus difficile et entravant la cohérence globale du design. @property résout ces problèmes en fournissant un mécanisme pour contrôler les types de valeurs qui peuvent être assignées à vos propriétés personnalisées.

Pourquoi utiliser CSS @property ? Bénéfices et Avantages

Les avantages de l'utilisation de @property sont nombreux et contribuent directement à l'amélioration des pratiques de développement web :

• Maintenabilité du code améliorée : En définissant explicitement les types et les comportements des propriétés personnalisées, vous rendez votre code plus auto-documenté et plus facile à comprendre. Les autres développeurs (ou votre futur vous) saisiront rapidement comment une propriété personnalisée est censée être utilisée.
• Cohérence du design améliorée : La validation garantit que seules des valeurs valides sont assignées aux propriétés personnalisées. Cela aide à maintenir une apparence visuelle cohérente sur votre site web ou votre application.
• Robustesse et prévention des erreurs : Les valeurs invalides seront rejetées, prévenant les problèmes de style inattendus et réduisant le temps passé à déboguer.
• Style dynamique : @property permet une meilleure intégration avec JavaScript, vous autorisant à contrôler et mettre à jour vos variables CSS par programmation en toute confiance, sachant que les valeurs sont valides.
• Meilleure auto-complétion et expérience développeur : Les éditeurs de code peuvent fournir une auto-complétion et des suggestions de code plus intelligentes, aidant les développeurs à écrire du CSS plus rapidement et avec plus de précision.
• Performance optimisée : Bien que l'impact sur les performances soit généralement faible, la validation peut parfois conduire à des optimisations mineures par le navigateur.

Composants Clés de la Règle @property

La règle-at @property se compose de plusieurs composants clés qui définissent le comportement d'une propriété personnalisée.

--property-name

C'est le nom de la propriété personnalisée que vous définissez. Il doit commencer par deux tirets (--), comme c'est la norme pour les propriétés personnalisées CSS.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

Le descripteur syntax définit le type ou le modèle autorisé pour les valeurs de la propriété personnalisée. Il utilise un sous-ensemble de la syntaxe CSS et peut prendre diverses valeurs, notamment :

• <color> : Représente une valeur de couleur (ex. : red, #FF0000, rgba(255, 0, 0, 1)).
• <length> : Représente une valeur de longueur (ex. : 10px, 5em, 20%).
• <number> : Représente une valeur numérique (ex. : 10, 3.14).
• <percentage> : Représente une valeur de pourcentage (ex. : 50%).
• <url> : Représente une URL (ex. : url('image.jpg')).
• <integer> : Représente une valeur entière (ex. : 10, -5).
• <angle> : Représente une valeur d'angle (ex. : 45deg, 0.5turn).
• <time> : Représente une valeur de temps (ex. : 2s, 200ms).
• <string> : Représente une valeur de chaîne de caractères.
• <image> : Représente une valeur d'image (identique à url).
• * : Accepte toute valeur CSS valide. C'est une approche très permissive qui doit être utilisée avec prudence.
• Types combinés : Vous pouvez combiner plusieurs types en utilisant des listes séparées par des espaces (ex. : <length> <length> <length> pour définir trois valeurs de longueur) ou utiliser le symbole '|' pour autoriser l'un des types listés (ex. : <length> | <percentage> pour supporter soit une longueur, soit un pourcentage).
• Syntaxes personnalisées : Les syntaxes personnalisées, pour des scénarios plus complexes, sont souvent prises en charge par des implémentations personnalisées, bien qu'elles soient généralement décrites à l'aide d'une syntaxe de type regex comme [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

Le descripteur inherits détermine si la propriété personnalisée hérite de sa valeur de son élément parent. Par défaut, les propriétés personnalisées n'héritent pas. Ce comportement peut être contrôlé avec une valeur booléenne : true ou false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

Le descripteur initial-value définit la valeur par défaut de la propriété personnalisée si elle n'est pas explicitement définie dans le CSS. Cela fournit une valeur de repli lorsque la propriété n'est pas spécifiée, similaire au comportement des propriétés CSS standard.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Exemples Pratiques

Plongeons dans quelques exemples pratiques pour illustrer comment utiliser @property efficacement.

Exemple 1 : Définir une propriété de couleur

Dans cet exemple, nous définissons une propriété personnalisée --primary-color pour représenter une couleur primaire dans notre système de design. Nous spécifions qu'elle n'accepte que des valeurs de couleur.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Valide */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valide */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Exemple 2 : Définir une propriété de longueur

Ici, nous définissons une propriété personnalisée --spacing pour gérer l'espacement entre les éléments, acceptant des valeurs de longueur. Cet exemple démontre clairement l'intérêt de définir une `initial-value` comme valeur par défaut pour l'ensemble du site. C'est particulièrement utile lors de l'utilisation d'un système de design dans lequel les espacements par défaut sont définis.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Exemple 3 : Définir une propriété entière

Cet exemple définit une propriété personnalisée pour le nombre de colonnes dans une disposition en grille, en validant que la valeur est un entier.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Exemple 4 : Héritage de propriété

Ici, nous définissons une propriété personnalisée qui *sera* héritée. La propriété `font-size` définie à `1rem` sur le body affectera tous ses enfants, sauf si elle est surchargée.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Surcharge la valeur héritée */
}

            

              
                Copy
              
            
          

Exemple 5 : Combiner les types

En utilisant l'opérateur '|', nous pouvons combiner des types. Ici, nous acceptons soit une `length` soit un `percentage` pour le décalage de l'ombre.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Meilleures Pratiques pour l'Utilisation de @property

Pour maximiser les avantages de @property, suivez ces meilleures pratiques :

• Définir les propriétés dans un emplacement central : Regroupez vos définitions @property dans un fichier ou une section CSS dédiée, souvent en haut de votre feuille de style principale ou dans un fichier de système de design. Cela favorise l'organisation et facilite la gestion de vos propriétés personnalisées.
• Utiliser des noms de propriétés descriptifs : Choisissez des noms qui indiquent clairement le but de chaque propriété personnalisée (ex. : --primary-button-color, --header-font-size). Cela améliore la lisibilité et la compréhension.
• Fournir une documentation complète : Documentez vos propriétés personnalisées, y compris leur syntaxe, leur utilisation et toutes les contraintes. Cette documentation peut être incluse sous forme de commentaires à côté de votre CSS ou dans un guide de style séparé.
• Choisir la bonne syntaxe : Sélectionnez soigneusement la syntax appropriée pour chaque propriété. L'utilisation de la bonne syntaxe prévient les erreurs et garantit que les valeurs assignées sont valides.
• Considérer l'héritage avec soin : Décidez si une propriété doit hériter de sa valeur de son élément parent. Cela dépend de la nature de la propriété et de la manière dont elle doit être appliquée dans votre design.
• Utiliser initial-value de manière stratégique : Définissez une initial-value pour toutes les propriétés personnalisées qui nécessitent une valeur par défaut. Cela fournit un repli et garantit que le style est appliqué même si la propriété n'est pas explicitement définie.
• Tirer parti des systèmes de design : Intégrez @property dans votre système de design pour maintenir la cohérence et améliorer le flux de travail de développement de votre équipe. En l'utilisant conjointement avec d'autres composants, vous construisez des designs plus robustes et modulaires, ce qui est souvent l'objectif lors de la création de composants pour une utilisation globale.
• Tester minutieusement : Testez vos propriétés personnalisées et leur comportement sur différents navigateurs et appareils pour garantir la compatibilité et une expérience utilisateur cohérente. Les tests multi-navigateurs sont une étape critique, car le support de `property` n'est pas encore universellement implémenté.

Compatibilité des Navigateurs

En date du 26 octobre 2023, le support de la règle-at @property varie selon les navigateurs. Chrome, Edge et Safari ont un bon support, tandis que le support de Firefox est limité. Consultez toujours des ressources comme Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) pour rester à jour sur la compatibilité des navigateurs.

Considérations importantes pour la compatibilité des navigateurs :

• Détection de fonctionnalité : Utilisez des techniques de détection de fonctionnalité pour gérer gracieusement les navigateurs qui ne supportent pas @property. Vous pouvez utiliser une vérification de propriété CSS ou une détection de fonctionnalité JavaScript pour appliquer des styles alternatifs ou des polyfills.
• Amélioration progressive : Concevez votre site web avec un style de base qui fonctionne sans @property. Ensuite, améliorez progressivement le design en ajoutant le support de @property pour les navigateurs compatibles.
• Polyfills et valeurs de repli : Envisagez d'utiliser des polyfills ou de fournir des valeurs de repli pour les navigateurs qui ne supportent pas entièrement @property. Cela peut impliquer l'utilisation de variables CSS simples, ou un pré-traitement à l'aide de SASS, LESS ou d'autres méthodologies.

Utiliser CSS @property avec JavaScript

L'un des plus grands avantages des propriétés personnalisées CSS est leur capacité à être manipulées avec JavaScript, permettant un style dynamique et des expériences utilisateur améliorées. @property renforce cette capacité, rendant l'intégration entre CSS et JavaScript encore plus puissante et prévisible.

Voici comment vous pouvez interagir avec les propriétés personnalisées définies à l'aide de @property en JavaScript :

1. Obtenir la valeur d'une propriété personnalisée : Utilisez getPropertyValue() pour récupérer la valeur d'une propriété personnalisée.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // ex., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Définir la valeur d'une propriété personnalisée : Utilisez setProperty() pour définir la valeur d'une propriété personnalisée. Grâce au paramètre syntax de la définition `@property`, la définition via JavaScript peut déclencher une validation de la valeur dans le navigateur.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Exemple : Changement de couleur dynamique avec JavaScript

Illustrons comment créer un changement de couleur dynamique en utilisant JavaScript et @property.

HTML :

            
<button class="my-button">Changer la couleur</button>

            

              
                Copy
              
            
          

CSS :

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript :

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Pourrait être basé sur une logique/entrée
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

Dans cet exemple, cliquer sur le bouton change la couleur de fond du bouton en modifiant la propriété personnalisée --button-color à l'aide de JavaScript.

Internationalisation (i18n) et CSS @property

CSS @property peut être un outil précieux pour créer des applications web qui supportent différentes langues et locales. Voici comment il peut être appliqué à l'i18n :

• Typographie : Définissez des propriétés personnalisées pour les tailles de police, les hauteurs de ligne et les familles de polices, vous permettant d'adapter l'apparence du texte en fonction de la langue sélectionnée.
• Mise en page : Utilisez des propriétés pour l'espacement, les marges et le padding pour s'adapter aux variations de la direction du texte (ex. : de gauche à droite vs de droite à gauche) et aux différentes largeurs de caractères.
• Couleurs : Employez des propriétés pour les couleurs des éléments de l'interface utilisateur, telles que les couleurs des boutons, du texte et des arrière-plans. Celles-ci peuvent être ajustées pour s'aligner sur les préférences culturelles ou les directives de design pour des régions spécifiques.
• Direction du texte : Utilisez une propriété personnalisée pour contrôler la direction du texte (ex. : ltr, rtl) et modifier la mise en page en conséquence.

Exemple : Adapter les tailles de police en fonction de la langue

Dans cet exemple, nous montrons comment adapter la taille de police des titres en fonction de la langue sélectionnée. L'approche utiliserait une bibliothèque JavaScript pour déterminer la langue appropriée et définir des propriétés personnalisées.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Ensuite, définissez dynamiquement la valeur en JavaScript en fonction de la langue détectée :

            
// En supposant une variable globale ou une fonction pour obtenir la langue de l'utilisateur
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Ajuster pour le japonais
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Défaut
}

            

              
                Copy
              
            
          

Considérations sur l'Accessibilité

Lorsque vous travaillez avec @property, il est essentiel de garder l'accessibilité à l'esprit :

• Contraste des couleurs : Assurez un contraste de couleur suffisant entre le texte et les arrière-plans. Utilisez des propriétés personnalisées pour les couleurs afin de mettre à jour facilement le design pour répondre aux exigences de contraste.
• Taille du texte : Permettez aux utilisateurs de contrôler la taille du texte. Utilisez des unités relatives (rem, em) et des propriétés personnalisées pour faciliter la mise à l'échelle des polices.
• Indicateurs de focus : Personnalisez les indicateurs de focus pour les rendre clairement visibles. Utilisez des propriétés personnalisées pour contrôler la couleur et le style des contours de focus.
• Attributs ARIA : Assurez-vous que les éléments ont les attributs ARIA appropriés lorsque vous utilisez des propriétés personnalisées pour contrôler les états ou le comportement.
• Navigation au clavier : Vérifiez que votre site web est facilement navigable à l'aide d'un clavier, surtout si des propriétés personnalisées sont utilisées pour gérer des éléments interactifs.

Considérations Multi-Navigateurs et Solutions de Contournement

Bien que @property soit un outil puissant, n'oubliez pas que le support des navigateurs n'est pas encore universellement implémenté. Vous devriez employer des techniques multi-navigateurs pour atténuer l'impact du manque de support.

• Amélioration progressive : Concevez votre style avec des variables CSS de base, puis utilisez `@property` pour des fonctionnalités supplémentaires dans les navigateurs pris en charge.
• Détection de fonctionnalité : Utilisez des méthodes de détection de fonctionnalité pour déterminer si un navigateur prend en charge @property avant d'appliquer des styles l'utilisant. Une simple vérification peut être effectuée à l'aide de JavaScript.
• Valeurs de repli CSS : Fournissez des valeurs de repli pour les propriétés qui ne sont pas prises en charge. Cela peut être fait en définissant directement les propriétés, ou en utilisant des variables différentes pour les navigateurs pris en charge et non pris en charge.
• Préprocesseurs : Utilisez des préprocesseurs CSS comme Sass ou Less pour traduire des structures de plus haut niveau en CSS standard qui peut être utilisé dans les navigateurs qui n'ont pas un support complet de `@property`. Bien que cela introduise une étape supplémentaire, les avantages l'emportent souvent sur les inconvénients.

Exemple d'une valeur de repli CSS :

            
.element {
  --base-color: #333; /* Valeur par défaut pour les navigateurs sans @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Détection de fonctionnalité pour @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Ajoutez ici un style plus complexe utilisant @property */
}

            

              
                Copy
              
            
          

Outils et Bibliothèques

Divers outils et bibliothèques peuvent aider à travailler avec @property :

• Plugins PostCSS : Des plugins comme `postcss-custom-properties` et `postcss-custom-properties-experimental` peuvent aider à transformer les propriétés personnalisées et à fournir un support pour les anciens navigateurs en convertissant les définitions `@property` en règles CSS équivalentes.
• Stylelint : Intégrez stylelint et des règles ou plugins personnalisés pour valider l'utilisation et la structure de vos propriétés personnalisées.
• Frameworks de systèmes de design : Intégrez @property dans des frameworks de systèmes de design populaires tels que Ant Design, Material UI et Bootstrap pour garantir la cohérence du design et offrir aux développeurs une expérience plus fluide.

Conclusion

CSS @property est un ajout puissant à la boîte à outils du développement web, apportant structure, validation et capacités dynamiques aux propriétés personnalisées. En définissant le type et le comportement de vos variables CSS, vous pouvez améliorer la maintenabilité du code, la cohérence du design et créer des solutions de style plus robustes et prévisibles.

À mesure que le support des navigateurs s'améliore, l'intégration de @property dans vos projets devient de plus en plus importante. En adoptant les meilleures pratiques décrites dans ce guide, vous pouvez tirer parti des avantages de cette nouvelle fonctionnalité et écrire du CSS plus efficace, maintenable et évolutif. Adoptez @property, et transformez votre flux de travail de développement web !

Pour en savoir plus

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property